<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The front-end development</title>

    <style>
        /**{*/
            /*margin: 0;padding: 0;list-style-type: none;*/
        /*}*/
        .wrap{
            margin:0 auto;
            /*width:90%;*/
        }
        #left{
            width:240px;
            background: #F6F6F6;
            float: left;
            box-sizing: border-box;
            padding: 18px;
            margin-right: 24px;
        }
        #right{
            /*background: #ffcccc;*/
            height: 100vh;
            float: right;
            width: calc(100% - 240px - 24px);
            box-sizing: border-box;
            padding: 1rem;
            overflow-y: auto;
        }
        a {
            text-decoration: none;
            color: #0645ad;
        }
        a:hover {
            text-decoration: underline;
        }
        a:visited {
            color: cadetblue;
        }
        li {
            margin-bottom: 0.1em;
            display: list-item;
            text-align: -webkit-match-parent;
        }
        ul {
            list-style-type: none;
            list-style-image: none;
            margin-left: 0;
            padding: 0;
        }

        pre {
            -moz-tab-size: 4;
            tab-size: 4;
            line-height: 1.3;
            color: #000;
            background-color: #f8f9fa;
            border: 1px solid #eaecf0;
            padding: 1em;
            white-space: pre-wrap;
            font-family: monospace,monospace;
            margin: 1em 0px;
        }
    </style>

</head>

<body style="margin-top: 0;">
<div class="wrap">

    <aside id="left">
        <nav>
            <h2>Html</h2>
            <ul>

                <li>
                    <a href="#yyhbq">语义化标签</a>
                    <ol>
                        <li><a href="#abbr">abbr</a></li>
                        <li><a href="#strong">strong</a></li>
                        <li><a href="#cite">cite</a></li>
                        <li><a href="#time">time</a></li>
                        <li><a href="#sup">sup 和 sub</a></li>
                        <li><a href="#figure">figure 和 figcaption</a></li>
                        <li><a href="#dfn">dfn</a></li>
                        <li><a href="#em">em</a></li>
                    </ol>
                </li>

                <!--<li>-->
                    <!--<a href="#">Function</a>-->
                    <!--<ol>-->
                        <!--<li><a href="#">Linking</a></li>-->
                        <!--<li><a href="#">Dynamic updates of web pages</a></li>-->
                    <!--</ol>-->
                <!--</li>-->

            </ul>
        </nav>
    </aside>

    <article id="right">


        <h3 id="yyhbq" style="font-size: 1.8em;border-bottom: 1px solid #a2a9b1;">语义化标签</h3>

        <ol>
            <li id="abbr">
                <h3>abbr</h3>
                <p><abbr title="World Wide Web">WWW</abbr></p>
            </li>
            <li id="strong">
                <h3>strong</h3>
                <p>A global map of the web index for countries in 2014 <strong>The World Wide Web (WWW)</strong>, also called <strong>the Web</strong></p>
            </li>
            <li id="cite">
                <h3>cite <small><em>通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。</em></small></h3>
                <p><cite>"What is the difference between xx and xx?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.</p>
            </li>
            <li id="time">
                <h3>time</h3>
                <p>W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>.</p>
            </li>
            <li id="sup">
                <h3>sup和sub</h3>
                <p>This text is<a><sup>[1]</sup></a></p>
                <p>This text is<a><sub>[2]</sub></a></p>
            </li>
            <li id="figure">
                <h3>figure 和 figcaption</h3>
                <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。</p>
                <figure>
                    <p>黄浦江上的的卢浦大桥</p>
                    <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
                    <img src="../img/shanghai_lupu_bridge.jpg" width="350" height="234" />
                    <figcaption>Fig.1 - 图片描述.</figcaption>
                </figure>
            </li>
            <li id="dfn">
                <h3>dfn <small><em>标记那些对特殊术语或短语的定义。</em></small></h3>
                <p>The <dfn>Internet</dfn> is a global system of interconnected computer networks.</p>
            </li>
            <li id="em">
                <h3>em <small><em>强调文本，通常以斜体渲染。</em></small></h3>
            </li>
            <li>
                <h3></h3>
                
                <pre>
                    <samp>
                    GET /home.html HTTP/1.1
                    Host: www.example.org
                    </samp>
                </pre>
            </li>

        </ol>


        <!--<p id="rel">
            <a href="" rel="next" rev="prev">sdfdf</a>
        </p>-->
    </article>
</div>

</body>
</html>